<template>
  <div class="identify_basis_list">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>根</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="6" @click.native="linkToDetail(1)">
              <div class="img-wrapper">
                <img src="./img/root.png" alt="">
              </div>
              <div class="title">根的类型</div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="24">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>茎</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="6" @click.native="linkToDetail(2)">
              <div class="img-wrapper">
                <img src="./img/地上茎的变态.jpg" alt="">
              </div>
              <div class="title">地上茎的变态</div>
            </el-col>
            <el-col :span="6" @click.native="linkToDetail(3)">
              <div class="img-wrapper">
                <img src="./img/地下茎的变态.png" alt="">
              </div>
              <div class="title">地下茎的变态</div>
            </el-col>
            <el-col :span="6" @click.native="linkToDetail(4)">
              <div class="img-wrapper">
                <img src="./img/茎的类型1.jpg" alt="">
              </div>
              <div class="title">茎的类型</div>
            </el-col>
            <el-col :span="6" @click.native="linkToDetail(5)">
              <div class="img-wrapper">
                <img src="./img/茎的生长方式.jpg" alt="">
              </div>
              <div class="title">茎的生长方式</div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="24">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>叶</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="6" @click.native="linkToDetail(6)">
              <div class="img-wrapper">
                <img src="./img/叶 变态叶.png" alt="">
              </div>
              <div class="title">变态叶</div>
            </el-col>
            <el-col :span="6" @click.native="linkToDetail(7)">
              <div class="img-wrapper">
                <img src="./img/复叶.jpg" alt="">
              </div>
              <div class="title">复叶</div>
            </el-col>
            <el-col :span="6" @click.native="linkToDetail(8)">
              <div class="img-wrapper">
                <img src="./img/叶 毛被.png" alt="">
              </div>
              <div class="title">毛被</div>
            </el-col>
            <el-col :span="6" @click.native="linkToDetail(14)">
              <div class="img-wrapper">
                <img src="./img/叶着生.png" alt="">
              </div>
              <div class="title">叶着生</div>
            </el-col>
            <el-col :span="6" @click.native="linkToDetail(11)">
              <div class="img-wrapper">
                <img src="./img/叶形.png" alt="">
              </div>
              <div class="title">叶形</div>
            </el-col>
            <el-col :span="6" @click.native="linkToDetail(13)">
              <div class="img-wrapper">
                <img src="./img/叶缘.png" alt="">
              </div>
              <div class="title">叶缘</div>
            </el-col>
            <el-col :span="6" @click.native="linkToDetail(9)">
              <div class="img-wrapper">
                <img src="./img/叶基.png" alt="">
              </div>
              <div class="title">叶基</div>
            </el-col>
            <el-col :span="6" @click.native="linkToDetail(10)">
              <div class="img-wrapper">
                <img src="./img/叶尖.png" alt="">
              </div>
              <div class="title">叶尖</div>
            </el-col>
            <el-col :span="6" @click.native="linkToDetail(12)">
              <div class="img-wrapper">
                <img src="./img/叶序.jpg" alt="">
              </div>
              <div class="title">叶序</div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="24">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>花</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="6" @click.native="linkToDetail(15)">
              <div class="img-wrapper">
                <img src="./img/花序2.png" alt="">
              </div>
              <div class="title">花序</div>
            </el-col>
            <el-col :span="6" @click.native="linkToDetail(16)">
              <div class="img-wrapper">
                <img src="./img/花冠2.png" alt="">
              </div>
              <div class="title">花冠</div>
            </el-col>
            <el-col :span="6" @click.native="linkToDetail(17)">
              <div class="img-wrapper">
                <img src="./img/花 结构.png" alt="">
              </div>
              <div class="title">花结构</div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="24">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>果实</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="6" @click.native="linkToDetail(18)">
              <div class="img-wrapper">
                <img src="./img/干果.png" alt="">
              </div>
              <div class="title">干果</div>
            </el-col>
            <el-col :span="6" @click.native="linkToDetail(19)">
              <div class="img-wrapper">
                <img src="./img/肉果.png" alt="">
              </div>
              <div class="title">肉果</div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { } from '@/api/plantList'
export default {
  data() {
    return {
    }
  },
  mounted() {
  },
  methods: {
    linkToDetail(type) {
      this.$router.push(`/plantlib/identify/detail/${type}`)
    }
  }
}
</script>

<style lang="scss">
.identify_basis_list {
  .el-col {
    margin-bottom: 20px;
    &:hover {
      cursor: pointer;
      box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    }
  }
  .el-card{
    img{
      width: 200px;
    }
    .el-card__header{
      font-size: 18px;
      font-weight: bold;
    }
    .img-wrapper{
      height: 300px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .title{
      text-align: center;
      font-size: 16px;
      line-height: 30px;
    }
  }
}
</style>
